<template>
  <div class="reseller">
    <div class="img-wrap">
        <img src="//cdn.swellpro.com/newReseller/sellmain.jpg" alt="">

        <div class="img-content">
            <div class="container">
                <h1>
                    <p>Would you like to</p>
                    <p>become a Swellpro Dealer?</p>
                </h1>
            </div>
        </div>
    </div>
    
    <div class="container" style="padding-top: 40px">
        <div class="left">
            <p class="title">Basic information</p>

            <kv :title="'Company registered name:'">
                <Row>
                   <Col :span="24">
                        <Input  :placeholder="'Please enter company registered name'"></Input>
                   </Col>
                </Row>
            </kv>

            <kv :title="'Company address:'">
                <Row :gutter="16">
                   <Col :span="12">
                        <Input :placeholder="'County'"></Input>
                   </Col>
                   <Col :span="12" class="noPad">
                        <Input :placeholder="'Region'"></Input>
                   </Col>
                   <Col :span="24">
                        <Input :placeholder="'Please enter company address'"></Input>
                   </Col>
                </Row>
            </kv>

            <kv :title="'Company address:'" :necessary="false">
                <Row :gutter="16">
                   <Col :span="8">
                        <Input :placeholder="'In-store+oline'"></Input>
                   </Col>
                   <Col :span="8">
                        <Input :placeholder="'in-store address'"></Input>
                   </Col>
                   <Col :span="8" class="noPad">
                        <Input :placeholder="'online store'"></Input>
                   </Col>
                   <Col :span="24" class="noPad">
                        <Input :placeholder="'Please enter your store address'"></Input>
                   </Col>
                   <Col :span="24">
                        <Input :placeholder="'Please enter website/online store address (contain http:// or https://)'"></Input>
                   </Col>
                </Row>
            </kv>
        </div>

        <div class="right">
            <p class="title">Applicant Information</p>

            <Row :gutter="16">
                <Col :span="12">
                    <kv :title="'First name:'">
                        <Input :placeholder="'Please enter your first name'"></Input>
                    </kv>
                </Col>

                <Col :span="12">
                    <kv :title="'Last name:'">
                        <Input :placeholder="'Please enter your first name'"></Input>
                    </kv>
                </Col>
            </Row>

            <kv :title="'Job position:'">
                <Row>
                   <Col :span="24">
                        <Input  :placeholder="'Please enter your job position'"></Input>
                   </Col>
                </Row>
            </kv>

            <kv :title="'Telephone number:'">
                <Row :gutter="16">
                   <Col :span="6">
                        <Input  :placeholder="'+ 32'"></Input>
                   </Col>
                   <Col :span="18">
                        <Input  :placeholder="'Please enter your telephone number'"></Input>
                   </Col>
                </Row>
            </kv>

            <kv :title="'Email address:'">
                <Row>
                   <Col :span="24">
                        <Input  :placeholder="'Please enter email'"></Input>
                   </Col>
                </Row>
            </kv>
        </div>
    </div>

    <div class="container" style="padding: 20px 0 40px">
        <div class="button" @click="submit">Submit Application</div>
    </div>

    <Message v-model="message" :status="icon_status" v-if="isShowMessage" @close="() => { this.isShowMessage = false }"></Message>
  </div>
</template>

<script>
import Kv from '~/components/pc/kv'
import Row from '~/components/pc/row'
import Col from '~/components/pc/col'
import Input from '~/components/pc/input'
import Message from '~/components/pc/message'
export default {
  data () {
    return {
        form: {
            phone: ''
        },
        icon_status: '',
        message: '', // 提示信息
        isShowMessage: false, // 是否展示信息
    };
  },

  head() {
    return {
        title: 'Become a Dealer - Swellpro',
        meta: [
            { hid: 'description', name: 'description', content: 'Become a Swellpro authorized dealer, stand out from the competition by distributing the unique waterproof drones series.'},
        ]
    }
  },

  components: {Kv, Row, Col, Input, Message},

  computed: {},

  mounted() {},

  methods: {
      submit () {
          setTimeout(() => {
              this.openMessage('The message has been sent. We will reply very soon.', 'success')
          }, 500);
      },

      // 打开弹窗
      openMessage(message, status = '') {
          this.icon_status = status
          this.message = message
          this.isShowMessage = true;
      }
  }
}

</script>
<style lang='stylus' scoped>
.reseller
    .img
        &-wrap
            position relative
            >img
                width 100%
                display block
        &-content
            position absolute
            left 0px
            top 0px
            width 100%
            height 100%
            .container
                width 1000px
                height 100%
                display flex
                align-items center
                h1
                    text-align left
                    font-weight 100
                    p
                        padding 2.5px 0
                        font-size 25px
    >.container
        width 1000px
        background #fff
        display flex
        flex-flow row no-wrap
        .left
            flex 0 0 50%
            box-sizing border-box
            padding-right 20px
        .right
            flex 0 0 50%
            box-sizing border-box
            padding-left 20px
    .title
        font-weight 500
        font-size 18px
        padding-bottom 10px
        border-bottom 1px solid #000
    .noPad
        padding-right 0px!important
    .button
        display block
        width 30%
        padding 15px 0px
        background rgb(242, 100, 68)
        margin 0px auto 0px
        border-radius 20px
        color rgb(255, 255, 255)
        text-align center
        font-size 20px
        cursor pointer
textarea,select
    display block
    width 100%
    line-height 1.5
    padding 4px 7px
    font-size 12px
    border 1px solid #dcdee2
    border-radius 4px
    color #515a6e
    background-color #fff
    background-image none
    position relative
    outline none
    cursor text
    font-weight 300
    box-sizing border-box
    transition border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out
    &:focus
        border-color #f26444
</style>